{extend name="system@public:layout" /}
{block name="title"}统计图表{/block}
{block name="head"}
<script src="/public/plugins/echarts/echarts-all.js"></script>
<style>
    .ibox-content h4{
        margin-top: 12px;
    }
</style>
{/block}
{block name="body"}
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title"><h5>综合指标</h5></div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title"><h5>会员购买率</h5></div>
                                <div class="ibox-content">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-content" style="border-width:0;">
                                            <div class="row">
                                                <div class="col-xs-3 text-center">
                                                    <small class="stats-label">网站会员总数</small>
                                                    <h4>{$statics.member_total}</h4>
                                                </div>
                                                <div class="col-xs-3 text-center">
                                                    <small class="stats-label">会员订单总数</small>
                                                    <h4>{$statics.order_total}笔</h4>
                                                </div>
                                                <div class="col-xs-3 text-center">
                                                    <small class="stats-label">会员有效订单数</small>
                                                    <h4>{$statics.total}笔</h4>
                                                </div>
                                                <div class="col-xs-3 text-center">
                                                    <small class="stats-label">会员购买率</small>
                                                    <h4>{$statics.member_rate}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div style="height:10px;"></div>
                                <div class="ibox-title"><h5>综合数据</h5></div>
                                <div class="ibox-content">
                                    <div class="ibox float-e-margins">
                                        <div class="ibox-content" style="border-width:0;">
                                            <div class="row">
                                                <div class="col-xs-3 text-center">
                                                    <small class="stats-label">商品总数</small>
                                                    <h4>{$statics.total_goods}</h4>
                                                </div>
                                                <div class="col-xs-3 text-center">
                                                    <small class="stats-label">订单总数</small>
                                                    <h4>{$statics.order_total}笔</h4>
                                                </div>
                                                <div class="col-xs-3 text-center">
                                                    <small class="stats-label">订单总金额</small>
                                                    <h4>￥{$statics.total_price}元</h4>
                                                </div>
                                                <div class="col-xs-3 text-center">
                                                    <small class="stats-label">商品评价</small>
                                                    <h4>{$statics.total_geval}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="echarts" id="echarts-pie-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title"><h5>订单区域分布图</h5></div>
                <div class="ibox-content">
                    <div style="height:600px" id="echarts-map-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    $(function () {
        //饼图
        var pieData = {$pieData};
        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        var pieoption = {
            title: {
                text: pieData.title.text,
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: pieData.legend.data
            },
            calculable: true,
            series: [
                {
                    name: pieData.series.name,
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: pieData.series.data
                }
            ]
        };
        pieChart.setOption(pieoption);
        $(window).resize(pieChart.resize);
        //区域分布图
        var mapData = {$mapData};
        var mapChart = echarts.init(document.getElementById("echarts-map-chart"));
        var mapoption = {
            title: {
                text: mapData.title.text,
                x: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: mapData.legend.data,
            },
            dataRange: {
                min: 0,
                max: 2500,
                x: 'left',
                y: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            roamController: {
                show: true,
                x: 'right',
                mapTypeControl: {
                    'china': true
                }
            },
            series: [
                {
                    name: mapData.series[0].name,
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    itemStyle: {
                        normal: {label: {show: true}},
                        emphasis: {label: {show: true}}
                    },
                    data: mapData.series[0].data
                },{
                    name: mapData.series[1].name,
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    itemStyle: {
                        normal: {label: {show: true}},
                        emphasis: {label: {show: true}}
                    },
                    data: mapData.series[1].data
                }
            ]
        };
        mapChart.setOption(mapoption);
        $(window).resize(mapChart.resize);

    });
</script>
{/block}